<template>
   <div class="">
     我是A组件
     <div ref="div">{{ str }}</div>
     <button @click="change">修改Str</button>
     <hr>
   </div>
</template>

<script setup lang='ts'>
import {ref ,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onRenderTracked,onRenderTriggered} from 'vue'
// beforeCreatte created setup 语法糖模式没有这俩个生命周期  setup代替
// onBeforeMount 读不到dom  onMounted 可以读取dom
// onBeforeUpdate获取的是更新之前的dom onUpdated 获取的是更新之后的
console.log('setup');
const str = ref<string>('inzv')

const div = ref<HTMLDivElement>()
let change = ()=>{
    str.value = "inzv修改了"
}
//创建
onBeforeMount(()=>{
    console.log("创建之前========>",div.value);
    
})
onMounted(() => {
    console.log("创建完成========>",div.value);
    
});
//更新钩子
onBeforeUpdate(() => {
    console.log("更新组件之前========>",div.value?.innerText);
    
});
onUpdated(() => {
    console.log("更新完成========>",div.value?.innerText);
    
});
//销毁
onBeforeUnmount(() => {
    console.log("销毁之前========>");
    
});
onUnmounted(() => {
    console.log("销毁完成========>");
    
});
onRenderTracked((event) => {
    console.log(event)
    //调试
});
onRenderTriggered((event) => {
    console.log(event)
});
</script>

<style scoped>

</style>